<template>
  <!-- 更多操作,不是页面级的组件
  moreAction组件和articleList组件是同级关系，都是index.vue的子组件
  -->
  <div class="more-action">
    <!-- 状态一 isReport切换显示状态一和状态二，如果要举报就显示状态二-->
    <van-cell-group v-if="!isReport">
      <!-- 直接抛出事件，具体操作由父组件index.vue去实现 -->
      <van-cell @click="$emit('dislike')">不感兴趣</van-cell>
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <!-- 状态二 -->
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <!-- 点击事件，向父组件抛出report事件，传递数据：举报类型编号 -->
      <van-cell
      v-for="item in list"
      :key="item.value"
      @click="$emit('report', item.value)">{{item.label}}</van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import reportList from '@/constant/report.js';
export default {
  name: 'MoreAction',
  props: { },
  data () {
    return {
      // 定义了数据项才能用v-for
      list: reportList,
      isReport: false
    };
  },
  computed: { },
  created () { },
  mounted () { },
  methods: { }
};
</script>

<style scoped lang='less'></style>
